<template>
    <div class="boxbox">
        <button class="butbg">LOGO</button>
        <div class="imgBox">
            <div class="loginBox">
                <div class="logintop">西州医院一体化智慧中心</div>
                <!-- <input type="text" placeholder="请输入您的用户名/邮箱">
                <input type="text" placeholder="请输入您的密码">
                <button class="but" @click="submitForm">下一步</button> -->
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="50px"
                    class="demo-ruleForm">
                    <el-form-item prop="account">
                        <el-input v-model="ruleForm.account" autocomplete="off" placeholder="请输入账号" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm">下一步</el-button>
                    </el-form-item>
                </el-form>
                <div>我已阅读并统一<span>服务协议</span>和 <span>隐私政策</span></div>
            </div>
            <!-- <img src="../../assets/imgs/微信图片_20230108163803.png" alt=""> -->
            <img src="../../assets/imgs/微信图片_20230108163803.png" alt="">

        </div>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
            <path fill="#0099ff" fill-opacity="1"
                d="M0,32L16,42.7C32,53,64,75,96,90.7C128,107,160,117,192,133.3C224,149,256,171,288,165.3C320,160,352,128,384,122.7C416,117,448,139,480,133.3C512,128,544,96,576,69.3C608,43,640,21,672,58.7C704,96,736,192,768,197.3C800,203,832,117,864,69.3C896,21,928,11,960,32C992,53,1024,107,1056,117.3C1088,128,1120,96,1152,80C1184,64,1216,64,1248,69.3C1280,75,1312,85,1344,106.7C1376,128,1408,160,1424,176L1440,192L1440,320L1424,320C1408,320,1376,320,1344,320C1312,320,1280,320,1248,320C1216,320,1184,320,1152,320C1120,320,1088,320,1056,320C1024,320,992,320,960,320C928,320,896,320,864,320C832,320,800,320,768,320C736,320,704,320,672,320C640,320,608,320,576,320C544,320,512,320,480,320C448,320,416,320,384,320C352,320,320,320,288,320C256,320,224,320,192,320C160,320,128,320,96,320C64,320,32,320,16,320L0,320Z">
            </path>
        </svg>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import store from '@/store';
import router from '@/router';
import { usersLogin } from '@/API/user.api'



const ruleForm = reactive({
    account: 'xdr',
    password: '123456',
})
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    //哪个字段的规则 ?  校验不通过提示的错误信息？ 什么时候去校验 
    account: [
        { required: true, message: '请输入账号', trigger: ['change', 'blur'] },
        // 同步自定义校验
        // { validator: accountValidate, trigger: ['change', 'blur'] },
        // 异步自定义校验
        // {asyncValidator:asyncAccountValidate,trigger:['change', 'blur']}
    ],
    password: [
        { required: true, message: '请输入密码', trigger: ['change', 'blur'] },
    ],

})
// const getData = async () => {
//     const res = await usersLogin(ruleForm)
//     console.log(res);
//     if(res.data.code === 1){
//         ElMessage.success(res.data.msg)
//         store.commit('user/M_userinfo',res.data)
//         router.push('/Index')
//     }else{
//         ElMessage.success(res.data.msg)
//     }
// }
//登录按钮
const submitForm = () => {
    ruleFormRef.value?.validate(async (valid) => {
        // valid返回true或fales  true表示通过
        console.log(valid)
        if (valid) {
            //分发action,得到promise
            // console.log('给后端发数据')
            const err = await store.dispatch('user/A_login', ruleForm)
            if (err) {
                //错误的
                ElMessage.error(err)
            } else {
                ElMessage.success('登录成功了')
                router.push('/index')
            }
        } else {
            //错误
            alert('请正确填写表单')
        }
    })
}
</script>

<style scoped >
.boxbox {}

.logintop {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    margin-left: 20px;
}

.loginBox {
    display: flex;
    flex-direction: column;
    margin-left: 100px;
    /* margin: auto; */
}

input {
    width: 300px;
    height: 30px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
}

.but {
    width: 310px;
    height: 39px;
    background: #9FCEFF;
    margin-bottom: 10px;
    color: #fff;
    border: none;
}

span {

    color: #84C0FF;
}

.butbg {
    background: rgb(182, 181, 181);
    color: rgb(39, 37, 37);
    /* margin-right: 300px; */
    margin: 0px 300px 20px 0px;
    border: none;

}

.imgBox {
    display: flex;
}

img {
    width: 300px;
    height: 300px;
    margin-left: 100px;
}
</style>